<script setup>
import {reactive} from "vue"
import {useRouter} from "vue-router";

const router = useRouter();

const searchGroup = reactive({
  price:"5万以下",
  level:"轿车",
  country:"中国",
  type:"比亚迪",
  changePrice(info){
    this.price = info
  },
  changeLevel(info){
    this.level = info
  },
  changeCountry(info){
    this.country = info
  },
  changeType(info){
    this.type = info
  },
  search(){
    router.push({name:"shop",query:{price:this.price,level:this.level,country:this.country,type:this.type}})
  }
})
</script>

<template>
  <div class="buyCar">
    <div class="main-box">
      <div class="container">
        <div class="main">
          <div class="main-title">
            <div class="main-title-text">
              <p>精准找车</p>
            </div>
            <div class="main-title-price">
              <ul>
                <li>
                  <span>价格：</span>
                </li>
                <li>
                  <input type="radio" name="price" checked @click="searchGroup.changePrice('5万以下')">5万以下
                </li>
                <li>
                  <input type="radio" name="price" @click="searchGroup.changePrice('10-15万')">10-15万
                </li>
                <li>
                  <input type="radio" name="price" @click="searchGroup.changePrice('15-20万')">15-20万
                </li>
                <li>
                  <input type="radio" name="price" @click="searchGroup.changePrice('20-30万')">20-30万
                </li>
                <li>
                  <input type="radio" name="price" @click="searchGroup.changePrice('30-50万')">30-50万
                </li>
                <li>
                  <input type="radio" name="price" @click="searchGroup.changePrice('50-100万')">50-100万
                </li>
                <li>
                  <input type="radio" name="price" @click="searchGroup.changePrice('100万以上')">100万以上
                </li>
              </ul>
            </div>
            <div class="main-title-level">
              <ul>
                <li>
                  <span>级别：</span>
                </li>
                <li>
                  <input type="radio" name="level" checked @click="searchGroup.changeLevel('轿车')">桥车
                </li>
                <li>
                  <input type="radio" name="level" @click="searchGroup.changeLevel('SUV')">SUV
                </li>
                <li>
                  <input type="radio" name="level" @click="searchGroup.changeLevel('MPV')">MPV
                </li>
              </ul>
            </div>
            <div class="main-title-country">
              <ul>
                <li>
                  <span>国别：</span>
                </li>
                <li>
                  <input type="radio" name="country" checked @click="searchGroup.changeCountry('中国')">中国
                </li>
                <li>
                  <input type="radio" name="country" @click="searchGroup.changeCountry('欧系')">欧系
                </li>
                <li>
                  <input type="radio" name="country" @click="searchGroup.changeCountry('日本')">日本
                </li>
                <li>
                  <input type="radio" name="country" @click="searchGroup.changeCountry('韩国')">韩国
                </li>
                <li>
                  <input type="radio" name="country" @click="searchGroup.changeCountry('美国')">美国
                </li>
              </ul>
            </div>
            <div class="main-title-brand">
              <ul>
                <li>
                  <span>品牌：</span>
                </li>
                <li>
                  <input type="radio" name="brand" checked @click="searchGroup.changeType('比亚迪')">比亚迪
                </li>
                <li>
                  <input type="radio" name="brand" @click="searchGroup.changeType('奥迪')">奥迪
                </li>
                <li>
                  <input type="radio" name="brand" @click="searchGroup.changeType('本田')">本田
                </li>
                <li>
                  <input type="radio" name="brand" @click="searchGroup.changeType('丰田')">丰田
                </li>
                <li>
                  <input type="radio" name="brand" @click="searchGroup.changeType('奔驰')">奔驰
                </li>
                <li>
                  <input type="radio" name="brand" @click="searchGroup.changeType('红旗')">红旗
                </li>
                <li>
                  <input type="radio" name="brand" @click="searchGroup.changeType('大众')">大众
                </li>
                <li>
                  <input type="radio" name="brand" @click="searchGroup.changeType('别克')">别克
                </li>
                <li>
                  <input type="radio" name="brand" @click="searchGroup.changeType('现代')">现代
                </li>
              </ul>
            </div>
            <div class="main-title-btn">
              <button @click="searchGroup.search">立刻找车</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped src="../css/buy-car.css">

</style>
